// 权限控制
import router from '@/router'
import store from '@/store'

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 声明白名单列表
const whiteList = [
  '/login',
  '/404'
]
// 开启路由前置守卫
router.beforeEach((to, from, next) => {
  // 路由开始跳转前，开启进度条

  // 路由守卫这种钩子函数通常都是成对出现
  // 有一个前往该路由的前置守卫就一定有一个前往该路由的后置守卫
  // 如果中途改变了路由前进的方向就找不到对应的后置守卫了
  // 我们是在后置守卫中关闭进度条的所以进度条也关闭不了了
  // 再这里需要手动关闭进度条
  NProgress.start()
  const token = store.state.user.token
  // token 存在，已经登录
  if (token) {
    if (to.path === '/login') {
      // 去的是登录页，强制跳转到后台主页
      next('/')
      NProgress.done()
    } else {
      // 当vuex中没有用户信息中的数据时 调用接口
      if (!store.state.user.userInfo.userId) {
        // 只有用户登录之后才需要用户信息接口
        // 当用户前往任意地址都需要调用
        store.dispatch('user/fetchUserInfo')
      }
      // 去的不是登录页，直接放行
      next()
    }
    // token 不存在，还没登录
  } else {
    if (whiteList.includes(to.path)) {
      // 要去的是白名单页面，直接放行
      next()
    } else {
      // 要去的需要登录才能访问的页面，强制跳转到登录页登录
      next('/login')
      NProgress.done()
    }
  }
})

// 路由后置守卫
// 当路由跳转结束后会触发
// 此时我们结束进度条
router.afterEach((to, from) => {
  NProgress.done()
})
